/* eslint-disable */
<template>
  <div class="editNodeBox editLinkBox">
    <el-select
      placeholder="选择或搜索连接"
      v-model="editLinkModel.value"
      value="value"
      @change="editLinkShow"
      size="mini"
      filterable
    >
      <el-option
        v-for="item in linksArr"
        :key="item.uuid"
        :label="item.uuid + ' ' + item.predicate"
        :value="item.uuid"
      >
      </el-option>
    </el-select>
    <div class="row node_select_row">
      <div class="title">源节点</div>
      <el-select
        class="selector"
        placeholder="请先选择连接"
        v-model="editLinkModel.s_id"
        value="value"
        size="mini"
      >
        <el-option
          v-for="item in nodesArr"
          :key="item.uuid"
          :label="item.uuid + ' ' + item.label"
          :value="item.uuid"
        >
        </el-option>
      </el-select>
    </div>
    <div class="row node_select_row">
      <div class="title">目标节点</div>
      <el-select
        class="selector"
        placeholder="请先选择连接"
        v-model="editLinkModel.o_id"
        value="value"
        size="mini"
      >
        <el-option
          v-for="item in nodesArr"
          :key="item.uuid"
          :label="item.uuid + ' ' + item.label"
          :value="item.uuid"
        >
        </el-option>
      </el-select>
    </div>
    <div class="row">
      <input class="input" v-model="editLinkModel.predicate" placeholder="连接名称" />
    </div>
    <div class="row">
      <el-button class="el-button" size="mini" v-on:click="wantEditLink"
        >修改</el-button
      >
    </div>
    <div class="row">
      <el-button
        class="el-button"
        type="danger"
        plain
        size="mini"
        v-on:click="wantDeleteLink"
        >删除</el-button
      >
    </div>
  </div>
</template>

<script>
import { editLinkAPI,deleteLinkAPI } from "@/api/kgeditor/elementeditor";

export default {
  name: "editLinkComponent",
  data() {
    return {
      editLinkModel: {
        value: "", //用于表单控件展示
        id: "",
        s_id: "",
        o_id: "",
        predicate: "",
        running: false
      },
      // KgEditor父组件在两层el组件外
      KG: this.$parent.$parent.$parent.$parent.$refs.graphComponent.KG,
      nodesArr: [],
      linksArr: []
    };
  },
  created() {
    this.nodesArr = this.KG.kgInfo.visibleNodes;
    this.linksArr = this.KG.kgInfo.visibleLinks;
  },
  watch:{
    "KG.update.nodes": {
      handler:function() {
        this.nodesArr = null;
        this.nodesArr = this.KG.kgInfo.visibleNodes;
      },
      deep:true
    },
    "KG.update.links": {
      handler:function() {
        this.linksArr = null;
        this.linksArr = this.KG.kgInfo.visibleLinks;
      },
      deep: true
    }
  },
  methods: {
    /**
     * --- editBase link function ---
     */
    //选择修改某个连接时显示其信息
    editLinkShow(id) {
      let link = this.KG.getLinkById(Number(id));
      if (link == null) {
        this.$message.error("找不到连接实体,请刷新页面或重新加载数据");
      } else {
        this.editLinkModel.id = link.uuid;
        this.editLinkModel.s_id = link.sId;
        this.editLinkModel.o_id = link.tId;
        this.editLinkModel.predicate = link.predicate;
        this.KG.zoomToLink(link.uuid);
      }
    },
    wantEditLink(){
      let _this = this;
      if (this.editLinkModel.id == "") {
        this.$message.info("请先选择要编辑的连接");
        return;
      }
      //--- 检查源节点是否存在
      if (this.KG.getNodeById(Number(this.editLinkModel.s_id)) == null) {
        this.$message.error("源节点不存在！");
        return;
      }
      //--- 检查目标节点是否存在
      if (this.KG.getNodeById(Number(this.editLinkModel.o_id) == null)) {
        this.$message.error("目标节点不存在！");
        return;
      }
      //--- 检查是否与自身连接
      if (this.editLinkModel.o_id == this.editLinkModel.s_id) {
        this.$message.error("不支持与自身连接");
        return;
      }
      let originalLink = this.KG.getLinkById(Number(this.editLinkModel.id));
      let fixMessage = "";
      //--- 检查关系是否改变
      if(this.editLinkModel.predicate != "" && this.editLinkModel.predicate != originalLink.predicate){
        fixMessage += '<div><b>关系:</b> "' + originalLink.predicate + '"->"' + this.editLinkModel.predicate + '";</div>';
      }
      else _this.editLinkModel.predicate = originalLink.predicate;
      //--- 检查源节点是否改变
      if(this.editLinkModel.s_id != "" && this.editLinkModel.s_id != originalLink.sId){
        fixMessage += '<div><b>源节点:</b> "' + originalLink.sId + '"->"' + this.editLinkModel.s_id + '";</div>';
      }
      else _this.editLinkModel.s_id = Number(originalLink.sId);
      //--- 检查目标节点是否存在
      if(this.editLinkModel.o_id != "" && this.editLinkModel.o_id != originalLink.tId){
        fixMessage += '<div><b>目标节点:</b> "' + originalLink.tId + '"->"' + this.editLinkModel.o_id + '";</div>';
      }
      else _this.editLinkModel.o_id = Number(originalLink.tId);
      //--- 检查是否有任何改变
      if (fixMessage == "") {
        this.$message.warning("没有做任何修改");
        return;
      }
      if (this.editLinkModel.running) {
        this.$message.info("上一次操作尚未完成,请稍等");
        return;
      }
      this.$confirm(fixMessage + "做出以上修改,是否继续?", {
        dangerouslyUseHTMLString: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        _this.editLink();
      });
    },
    editLink() {
      let _this = this;
      this.editLinkModel.running = true;
      editLinkAPI(
        {
          id: this.editLinkModel.id,
          s_id: this.editLinkModel.s_id,
          o_id: this.editLinkModel.o_id,
          predicate: this.editLinkModel.predicate,
          kgID: this.KG.kgInfo.id
        } ,
        function() {
          _this.KG.editLink(
            _this.editLinkModel.id,
            _this.editLinkModel.predicate,
            _this.editLinkModel.s_id,
            _this.editLinkModel.o_id
          );
          _this.$message.success("修改连接成功");
        },
        function(error) {
          _this.$message.error("修改连接失败" + error);
          _this.editLinkModel.predicate = "";
        },()=>{
          _this.editLinkModel.running = false;
        }
      );
    },

    /**
     * --- delete link function ---
     */
    wantDeleteLink() {
      let _this = this;
      if (this.editLinkModel.id == "") {
        this.$message.info("请先选择要删除的连接");
        return;
      }
      if (this.editLinkModel.running) {
        this.$message.info("上一次操作尚未完成,请稍等");
        return;
      }
      this.$confirm("确定要删除当前连接?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        _this.deleteLink();
      });
    },
    deleteLink() {
      let _this = this;
      this.editLinkModel.running = true;
      deleteLinkAPI(
        {
          id: _this.editLinkModel.id,
          kgID: _this.KG.kgInfo.id
        },
        function() {
          _this.KG.deleteLinkById(Number(_this.editLinkModel.id));
          _this.editLinkModel.id = "";
          _this.editLinkModel.value = "";
          _this.editLinkModel.id = "";
          _this.editLinkModel.s_id = "";
          _this.editLinkModel.o_id = "";
          _this.editLinkModel.predicate = "";
          _this.editLinkModel.running = false;
          _this.$message.success("删除连接成功");
        },
        function(error) {
          _this.editLinkModel.running = false;
          _this.$message.error("删除连接失败" + error);
        }
      );
    }
  }
};
</script>

<style scoped>
.node_select_row {
  margin-left: 10px;
}
.input {
  display: block;
  margin: 0 auto;
  width: 85%;
  font-size: 10px;
}
</style>
